<template>
    <div class="wrapper" ref="wrapper">
        <div class="recommend">
        <div class="banner">
            <swiper :options="swiperOption">
                <swiper-slide v-for="item of slider" :key="item.id">
                    <img class="banner-img"  :src="item.picUrl" alt="">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
                </swiper>
            </div>
            <div class="list">
                <h2 class="list-title">电台</h2>
                <div class="list-item">
                    <ul>
                        <li v-for="item of radioList" :key="item.radioid" @click="selectHotList(item.radioid)">
                            <div class="list-img">
                                <img v-lazy="item.picUrl" alt="">
                            </div>
                            <div class="list-desc">{{item.Ftitle}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list">
                <h2 class="list-title">热门歌单</h2>
                <div class="list-item">
                    <ul>
                        <li v-for="item of songList" :key="item.id" @click="selectHotList(item.id)">
                            <div class="list-img">
                                <img v-lazy="item.picUrl" alt="">
                            </div>
                            <div class="list-desc">{{item.songListDesc}}</div>
                            <div class="list-author">{{item.songListAuthor}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <m-footer></m-footer>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import MFooter from '../../common/footer'
// 引入axios
import axios from 'axios'
// 引入better-scroll
import BScroll from 'better-scroll'

export default {
  name: 'recommend',
  components: {
    MFooter
  },
  data () {
    return {
      slider: [],
      radioList: [],
      songList: [],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: true,
        // swiper监听到本身或者父级元素发生dom变化的时候进行自我刷新-->>初始化
        observer: true,
        observeParents: true
      }
    }
  },
  methods: {
    selectHotList (radioid) {
      // 改变全局store
      this.$store.commit('selectHotList', radioid)
      this.$router.push('/recommend/selectHotList=' + radioid)
    },
    getRecommendInfo () {
      // 获取ajax数据
      // axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
      axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
        .then(this.getRecommendInfoSucc)
    },
    getRecommendInfoSucc (res) {
      console.log(res.data)
      res = res.data
      // 如果后端正确的返回结果，而且有data这个内容执行
      if (res.data) {
        const data = res.data
        this.slider = data.slider
        this.radioList = data.radioList
        this.songList = data.songList
      }
    }
  },
  mounted () {
    this.getRecommendInfo()
    // 初始化BScroll
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style lang="less" scoped>
    @import '../../assets/less/variable.less';
    .banner /deep/ .swiper-pagination-bullet-active{
        background: #fff !important
    }
    .wrapper{
        width: 100%;
        position:fixed;
        top: 84px;
        bottom: 0px;
        overflow: hidden;
        background: #eee;
        .recommend{
            width: 100%;
            .banner{
            overflow: hidden;
            width: 100%;
            height: 0;
            padding-bottom: 40%; // 设置height为0，padding-bottom值为图片宽高比防止下面区域抖动
            background: #eee;
            .banner-img{
                width: 100%;
            }
            }
            .list{
                width: 100%;
                background: #fff;
                overflow: hidden;
                margin-bottom: 10px;
                .list-title{
                font-size: 16px;
                color: @text-d;
                margin: 10px 10px 0px 10px;
                font-weight: normal;
                }
                .list-item ul{
                    overflow: hidden;
                    width: 100%;
                    .box-sizing();
                    padding: 0 5px;
                    li{
                        width: 50%;
                        float: left;
                        min-width: 0;
                        .list-img{
                            width: 100%;
                            height: 0;
                            overflow: hidden;
                            padding: 5px 5px 100% 5px;
                            .box-sizing();
                            img{
                                width: 100%;
                                background: rgba(0, 0, 0, .05)
                            }
                        }
                        .list-desc{
                            color: @text-d;
                            margin-bottom: 10px;
                            .ellipsis();
                        }
                        .list-author{
                            color: @text;
                            margin-bottom: 10px
                        }
                    }
                }
            }
        }
    }
</style>
